<template>
  <div class="units-page">
    <el-card>
      <template #header>
        <div class="page-header">
          <h3>单位管理</h3>
          <el-button type="primary" @click="handleAdd">
            <el-icon><Plus /></el-icon>
            新增单位
          </el-button>
        </div>
      </template>

      <el-table :data="unitList" stripe>
        <el-table-column prop="code" label="单位编码" width="120" />
        <el-table-column prop="name" label="单位名称" width="150" />
        <el-table-column prop="type" label="单位类型" width="120">
          <template #default="{ row }">
            <el-tag>{{ row.type }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="baseUnit" label="基本单位" width="120" />
        <el-table-column prop="conversionRate" label="换算率" width="120">
          <template #default="{ row }">
            {{ row.conversionRate || 1 }}
          </template>
        </el-table-column>
        <el-table-column prop="description" label="说明" min-width="200" />
        <el-table-column label="操作" width="150" fixed="right">
          <template #default="{ row }">
            <el-button type="primary" size="small" text @click="handleEdit(row)">
              编辑
            </el-button>
            <el-button type="danger" size="small" text @click="handleDelete(row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 新增/编辑对话框 -->
    <el-dialog v-model="dialogVisible" :title="dialogTitle" width="500px">
      <el-form :model="unitForm" :rules="formRules" ref="formRef" label-width="100px">
        <el-form-item label="单位编码" prop="code">
          <el-input v-model="unitForm.code" placeholder="请输入单位编码" />
        </el-form-item>
        <el-form-item label="单位名称" prop="name">
          <el-input v-model="unitForm.name" placeholder="请输入单位名称" />
        </el-form-item>
        <el-form-item label="单位类型" prop="type">
          <el-select v-model="unitForm.type" placeholder="请选择" style="width: 100%">
            <el-option label="数量单位" value="数量" />
            <el-option label="重量单位" value="重量" />
            <el-option label="体积单位" value="体积" />
            <el-option label="长度单位" value="长度" />
          </el-select>
        </el-form-item>
        <el-form-item label="基本单位">
          <el-input v-model="unitForm.baseUnit" placeholder="如：个、克、升等" />
        </el-form-item>
        <el-form-item label="换算率">
          <el-input-number v-model="unitForm.conversionRate" :min="1" :precision="2" style="width: 100%" />
          <div class="tip">1{{ unitForm.name }} = {{ unitForm.conversionRate }}{{ unitForm.baseUnit }}</div>
        </el-form-item>
        <el-form-item label="说明">
          <el-input v-model="unitForm.description" type="textarea" :rows="2" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'

const dialogVisible = ref(false)
const formRef = ref()

const unitList = ref([
  { code: 'U001', name: '个', type: '数量', baseUnit: '个', conversionRate: 1, description: '基本数量单位' },
  { code: 'U002', name: '盒', type: '数量', baseUnit: '个', conversionRate: 10, description: '1盒=10个' },
  { code: 'U003', name: '箱', type: '数量', baseUnit: '个', conversionRate: 100, description: '1箱=100个' },
  { code: 'U004', name: '克', type: '重量', baseUnit: '克', conversionRate: 1, description: '基本重量单位' },
  { code: 'U005', name: '千克', type: '重量', baseUnit: '克', conversionRate: 1000, description: '1千克=1000克' }
])

const unitForm = reactive({
  id: null,
  code: '',
  name: '',
  type: '',
  baseUnit: '',
  conversionRate: 1,
  description: ''
})

const formRules = {
  code: [{ required: true, message: '请输入单位编码', trigger: 'blur' }],
  name: [{ required: true, message: '请输入单位名称', trigger: 'blur' }],
  type: [{ required: true, message: '请选择单位类型', trigger: 'change' }]
}

const isEdit = computed(() => !!unitForm.id)
const dialogTitle = computed(() => isEdit.value ? '编辑单位' : '新增单位')

const handleAdd = () => {
  Object.assign(unitForm, {
    id: null,
    code: '',
    name: '',
    type: '',
    baseUnit: '',
    conversionRate: 1,
    description: ''
  })
  dialogVisible.value = true
}

const handleEdit = (row) => {
  Object.assign(unitForm, { ...row })
  dialogVisible.value = true
}

const handleDelete = () => {
  ElMessage.success('删除成功')
}

const handleSubmit = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      ElMessage.success(isEdit.value ? '编辑成功' : '新增成功')
      dialogVisible.value = false
    }
  })
}
</script>

<style scoped>
.units-page {
  padding: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.page-header h3 {
  margin: 0;
}

.tip {
  font-size: 12px;
  color: #909399;
  margin-top: 5px;
}
</style>

